<template>
  <el-dialog :title="props.title + '设置'" @close="onClose" v-model="visible" width="800px">
    <div class="main">
      <el-scrollbar ref="scrollRef" height="650px" :min-size="10">
        <div class="title">基本设置</div>
        <el-form disabled :model="formParams" ref="formRef" label-width="120px">
          <el-form-item label="活动名称" prop="activityName">
            <el-input
              v-model="formParams.activityName"
              placeholder="请输入活动名称"
              maxlength="16"
              clearable
              style="width: 320px"
            />
          </el-form-item>
          <el-form-item label="邀请奖励" prop="hostCouponName">
            <el-input
              v-model="formParams.hostCouponName"
              placeholder=""
              clearable
              style="width: 320px"
            />
          </el-form-item>
          <el-form-item label="被邀请奖励" prop="passiveCouponName">
            <el-input
              v-model="formParams.passiveCouponName"
              placeholder=""
              clearable
              style="width: 320px"
            />
          </el-form-item>
          <el-form-item label="活动时间" prop="huodongshijian">
            <div>
              <el-date-picker
                v-model="formParams.huodongshijian"
                type="datetimerange"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                format="YYYY-MM-DD HH:mm"
                value-format="x"
                date-format="YYYY-MM-DD"
                time-format="HH:mm"
                style="width: 320px"
                :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
              />
            </div>
          </el-form-item>
          <el-form-item label="奖励规则" required>
            <span>订单完成后奖励自动发放</span>
          </el-form-item>
          <el-form-item label="邀请好友规则" prop="ruleDescribe">
            <div style="width: 100%">
              <el-input
                v-model="formParams.ruleDescribe"
                style="width: 320px"
                :autosize="{ minRows: 3, maxRows: 8 }"
                type="textarea"
                maxlength="1000"
                placeholder="请输入内容"
                show-word-limit
              />
            </div>
          </el-form-item>
          <div class="title">分享设置</div>
          <el-form-item label="分享标题" prop="shareTitle">
            <el-input
              v-model="formParams.shareTitle"
              placeholder="请输入标题名称，最多20字"
              maxlength="20"
              clearable
              style="width: 320px"
            />
          </el-form-item>
          <el-form-item label="上传图片" prop="shareImg">
            <div>
              <ImageUploadByType
                v-model="formParams.shareImg"
                :isShowTip="false"
                uploadType="1"
                :limit="1"
                :fileSize="10"
              />请上传大小不超过10MB，格式为png/jpg/jpeg的文件，图片的比例为5:4, 如500px*400px
            </div>
          </el-form-item>
          <div class="title">活动设置</div>
          <el-form-item label="上传背景" prop="backgroundImg">
            <div>
              <ImageUploadByType
                v-model="formParams.backgroundImg"
                :isShowTip="false"
                uploadType="1"
                :limit="1"
                :fileSize="10"
              />请上传大小不超过10MB，格式为png/jpg/jpeg的文件，图片推荐尺寸750px*600px
            </div>
          </el-form-item>
          <el-form-item label="按钮文字" prop="buttonName">
            <el-input
              v-model="formParams.buttonName"
              placeholder="请输入按钮文字，最多十字"
              maxlength="10"
              clearable
              style="width: 320px"
            />
          </el-form-item>
          <el-form-item label="活动规则" prop="activityRule">
            <div style="width: 100%">
              <el-input
                v-model="formParams.activityRule"
                style="width: 320px"
                :autosize="{ minRows: 3, maxRows: 8 }"
                type="textarea"
                maxlength="1000"
                placeholder="请输入内容"
                show-word-limit
              />
            </div>
          </el-form-item>
        </el-form>
      </el-scrollbar>
    </div>
  </el-dialog>
</template>

<script setup>
import { getInvitationDetailApi, getStartCouponApi } from '@/api/marketing/invitation'
import { formatTexarea } from '@/utils/tools'
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  flag: {
    type: Boolean,
    default: false
  }
})

const scrollRef = ref(null)
const formRef = ref(null)

const visible = ref(false)

const formParams = reactive({
  type: 1,
  activityName: '',
  hostCouponName: '',
  passiveCouponName: '',
  huodongshijian: '',
  rule: 1, // 规则1自动发放2主动领取
  ruleDescribe: '',
  shareTitle: '',
  shareImg: '',
  backgroundImg: '',
  buttonName: '',
  activityRule: ''
})

function getDetail(marActivityId) {
  getInvitationDetailApi({ marActivityId }).then((res) => {
    Object.keys(formParams).forEach((key) => {
      formParams[key] = res?.data[key]
    })
    formParams.huodongshijian = [res.data.startTime, res.data.endTime]
    formParams.shareImg = res.data.shareImg ? [{ url: res.data.shareImg }] : ''
    formParams.backgroundImg = res.data.backgroundImg ? [{ url: res.data.backgroundImg }] : ''
    formParams.activityRule = formatTexarea(res.data.activityRule, 1)
    formParams.ruleDescribe = formatTexarea(res.data.ruleDescribe, 1)
    visible.value = true
  })
}

function onClose() {
  scrollRef.value?.setScrollTop(0)
}

function init(val) {
  getDetail(val)
}

defineExpose({
  init
})
</script>

<style lang="scss" scoped>
.main {
  position: relative;
  transform: translate3d(0, -20px, 0);

  .title {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 600;
  }
}

::v-deep .el-upload-list__item {
  transition: none !important;
}
</style>
